<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>京东案例（弹性布局）</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        background: #f6f6f6;
      }
      header {
        position: relative;
        top: 0;
        height: 14rem;
        background: url("./images/bg.png") no-repeat;
        background-size: 100% 100%;
        z-index: 1000;
      }
      .fl {
        float: left;
      }
      .clearfloat::after {
        content: "";
        display: block;
        clear: both;
      }
      .menu {
        height: 44px;
        position: fixed;
        width: 100%;
        top: 0;
        display: flex;
        justify-content: space-between;
        z-index: 1100;
      }
      .menu.active {
        background: #f00;
      }
      .menu-btn {
        align-items: center;
        width: 40px;
        height: 44px;
      }
      .menu-btn span {
        margin: 14px;
        display: block;
        width: 20px;
        height: 18px;
        background: url("./images/menu1.png") no-repeat;
        background-size: 100% 100%;
      }
      .search-bar {
        margin: 5px 10px;
        width: 100%;
        background: #fff;
        border-radius: 30px;
      }
      .search-bar span:nth-child(1) {
        display: block;
        width: 20px;
        height: 15px;
        background: url("./images/jd.png") no-repeat;
        background-size: 20px 15px;
        margin: 9px 8px 0 15px;
      }
      .search-bar span:nth-child(1)::after {
        content: "";
        display: block;
        width: 1px;
        height: 16px;
        background: #ccc;
        position: relative;
        left: 28px;
      }
      .search-bar span:nth-child(2) {
        display: block;
        width: 18px;
        height: 15px;
        background: url("./images/jinglingtu.png") no-repeat -80px 0;
        background-size: 200px;
        position: relative;
        top: 9px;
        left: 5px;
      }
      .search-bar input {
        border: none;
        position: relative;
        top: 9px;
        left: 12px;
        outline: none;
        width: 60%;
      }
      .login {
        margin-right: 8px;
        height: 44px;
        width: 40px;
        color: #fff;
        font-size: 14px;
        line-height: 44px;
      }
      header .rotation-map {
        text-align: center;
        position: absolute;
        top: 3.5rem;
        left: 50%;
        transform: translateX(-52%);
        width: 88%;
        height: 8rem;
        background: #fff;
        z-index: 1005;
        background: url("./images/banner1.jpg") no-repeat center;
        background-size: cover;
        border-radius: 10px;
      }
      .banner {
        background: #fff;
        width: 100%;
        display: flex;
        justify-self: center;
      }
      .banner img {
        width: 100%;
      }
      .project-function {
        background: #f6f6f6;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-self: center;
      }
      .project-function a {
        width: 20%;
        font-size: 0.6rem;
        text-align: center;
        text-decoration: none;
      }
      .project-function a img {
        width: 60%;
        margin-top: 0.5rem;
      }
      .project-function a span {
        display: block;
        margin-top: 0.3rem;
        color: #666;
      }
      .tail-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
        width: 100%;
        height: 16vw;
        display: flex;
        background: #fff;
      }
      .tail-bar a {
        width: 20%;
      }
      .tail-bar a img {
        width: 100%;
      }
      .commodity {
        display: flex;
        justify-content: space-around;
      }
      .commodity > div {
        width: 47%;
        height: 120px;
        background: #0df;
      }
      .commodity .com-l div {
        width: 50px;
        height: 50px;
        margin-top: 10px;
        background: #f00;
      }
      .commodity .com-r div {
        width: 50px;
        height: 50px;
        margin-top: 10px;
        background: #00f;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <div class="rotation-map"></div>
    </header>
    <!-- 导航栏 -->
    <div class="menu">
      <div class="menu-btn">
        <span></span>
      </div>
      <div class="search-bar clearfloat">
        <span class="fl"></span>
        <span class="fl"></span>
        <input class="fl" type="text" placeholder="充气娃娃" />
      </div>
      <div class="login">登录</div>
    </div>
    <!-- 广告栏 -->
    <div class="banner">
      <div class="ban-l">
        <img src="./images/b-l.png" alt="" />
      </div>
      <div class="ban-c">
        <img src="./images/b-c.gif" alt="" />
      </div>
      <div class="ban-r">
        <img src="./images/b-r.png" alt="" />
      </div>
    </div>
    <!-- 功能栏 -->
    <div class="project-function">
      <a href="">
        <img src="./images/biao1.png" alt="" />
        <span>京东超市</span>
      </a>
      <a href="">
        <img src="./images/biao2.png" alt="" />
        <span>数码电器</span>
      </a>
      <a href="">
        <img src="./images/biao3.png" alt="" />
        <span>京东服饰</span>
      </a>
      <a href="">
        <img src="./images/biao4.png" alt="" />
        <span>京东生鲜</span>
      </a>
      <a href="">
        <img src="./images/biao5.png" alt="" />
        <span>京东到家</span>
      </a>
      <a href="">
        <img src="./images/biao6.png" alt="" />
        <span>充值缴费</span>
      </a>
      <a href="">
        <img src="./images/biao7.png" alt="" />
        <span>物流查询</span>
      </a>
      <a href="">
        <img src="./images/biao8.png" alt="" />
        <span>领卷</span>
      </a>
      <a href="">
        <img src="./images/biao9.png" alt="" />
        <span>领金贴</span>
      </a>
      <a href="">
        <img src="./images/biao10.png" alt="" />
        <span>PLUS会员</span>
      </a>
    </div>
    <!-- 尾部 -->
    <div class="tail-bar">
      <a href="">
        <img src="./images/t1.png" alt="" />
      </a>
      <a href="">
        <img src="./images/t2.png" alt="" />
      </a>
      <a href="">
        <img src="./images/t3.png" alt="" />
      </a>
      <a href="">
        <img src="./images/t4.png" alt="" />
      </a>
      <a href="https://home.m.jd.com/myJd/newhome.action">
        <img src="./images/t5.png" alt="" />
      </a>
    </div>
    <!-- 商品详情 -->
    <div class="commodity">
      <div class="com-l">
        <div></div>
        <div></div>
      </div>
      <div class="com-r">
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- 秒杀 -->
    <!-- <div class="seckill">

    </div> -->

    <div style="height: 1000px"></div>

    <script>
      // 滚动事件
      let menu = document.querySelector(".menu");
      document.onscroll = () => {
        !document.documentElement.scrollTop
          ? menu.classList.remove("active")
          : menu.classList.add("active");
      };

    </script>
  </body>
</html>
